<template>
	<view :class="vuex_theme">
		<u-navbar class="image-detail-content-title" title="图片" :is-back="false" :title-bold="true"
			:background="{background: vuex_bar_color}" :border-bottom="false">
			<view class="slot-wrap" slot="right">
				<u-circle-progress v-if="imageUploadItem.progress" :width="40" border-width="3"
					class="pre-box-item-progress slot-wrap-right" :percent="imageUploadItem.progress" bg-color="none"
					:round="true" :active-color="progressColor(imageUploadItem.progress)">
				</u-circle-progress>
				<u-icon v-else class="slot-wrap-right" name="plus" @click="chooseImage" size="40"></u-icon>
			</view>
		</u-navbar>
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{ leftList }">
				<view class="image-warter-left color-gradual" v-for="(item, index) in leftList" :key="index"
					@click="showDetal(item)" @longpress="oprate(item)">
					<u-lazy-load :threshold="-10" border-radius="10" class="color-gradual-same"
						:image="$u.http.config.baseUrl + encodeURI(item.url) + '?x-oss-process=image/resize,w_200,q_2,limit_0'">
					</u-lazy-load>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="image-warter-right color-gradual" v-for="(item, index) in rightList" :key="index"
					@click="showDetal(item)" @longpress="oprate(item)">
					<u-lazy-load :threshold="-10" border-radius="10" class="color-gradual-same"
						:image="$u.http.config.baseUrl + encodeURI(item.url) + '?x-oss-process=image/resize,w_200,q_2,limit_0'">
					</u-lazy-load>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		<u-back-top class="color-gradual" :scroll-top="scrollTop" top="1"></u-back-top>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-popup class="color-gradual-same" border-radius="10" v-model="show" mode="bottom" height="100%" mask closeable
			close-icon-pos="bottom-left" :close-icon-size="44">
			<swiper class="image-swiper color-gradual-same" :autoplay="false" :current="imageSwipeCurrent"
				:circular="false" @change="imageSwipeChange" img-mode="aspectFit">
				<swiper-item v-for="(item, index) in flowList" class="color-gradual-same" @touchmove="handletouchmove"
					@touchstart="handletouchstart" @touchend="handletouchend">
					<u-image v-if="index < (imageSwipeCurrent + 2) && index > (imageSwipeCurrent - 2)"
						class="image-swiper-image color-gradual-same" :src="$u.http.config.baseUrl + item.url"
						mode="aspectFit" :draggable="false" lazy-load></u-image>
				</swiper-item>
			</swiper>
		</u-popup>
		<u-action-sheet class="operation" :list="operationList" @click="operationClick" v-model="operationShow"
			:cancel-btn="false"></u-action-sheet>
	</view>
</template>

<script>
	// '?x-oss-process=image/resize,w_200,q_6,limit_0'
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				imageUploadItem: {
					progress: 0
				},
				operationItem: {},
				operationShow: false,
				operationList: [{
					text: '删除',
					color: 'red',
					fontSize: 28
				}],
				show: false,
				showUrl: undefined,
				scrollTop: 0,
				page: 0,
				total: 20,
				imageSwiperList: [],
				imageSwipeCurrent: 0,
				flag: 0, //1向左滑动,2向右滑动,3向上滑动 4向下滑动
				lastX: 0,
				lastY: 0,
				index: 0
			};
		},
		onLoad() {
			this.addRandomData();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.addRandomData();
		},
		methods: {
			addRandomData() {
				if (this.flowList.length >= this.total) {
					this.loadStatus = 'nomore'
					return
				}
				this.loadStatus = 'loading'
				this.$u.get('/api/file/image/list?offset=' + this.flowList.length).then(res => {
					const {
						total,
						data
					} = res
					this.total = total
					data.forEach(item => {
						item.id = this.$u.guid();
						item.url = item.url
						this.flowList.push(item);
					})
					if (this.flowList.length >= this.total) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'loadmore'
					}
				}).catch(e => {
					this.loadStatus = 'loadmore'
				})
			},
			imageSwipeChange(e) {
				this.imageSwipeCurrent = e.target.current
				if (e.target.current > this.flowList.length - 3) {
					this.addRandomData()
				}
			},
			showDetal(item) {
				this.flowList.forEach((e, index) => {
					if (e.id == item.id) {
						this.imageSwipeCurrent = index
						this.show = true
						return
					}
				})

			},
			oprate(item) {
				this.operationItem = item
				this.operationShow = true
			},
			operationClick(index) {
				if (index === 0) {
					this.deleteSwiperItem(this.operationItem)
				}
			},
			chooseImage() {
				uni.chooseImage({
					success: res => {
						this.uploadImage(res.tempFilePaths)
					}
				})
			},
			progressColor(progress) {
				const r = 230 - progress * 2;
				const g = 150 + parseInt(progress / 2);
				const b = 10 + parseInt(progress);
				return 'rgb(' + r + ', ' + g + ', ' + b + ')'
			},
			uploadImage(files) {
				const self = this;
				const fileNum = files.length
				const uploadOne = (index) => {
					self.imageUploadItem.progress = 0
					const file = files[index]
					const uploadTask = uni.uploadFile({
						url: self.$u.http.config.baseUrl + '/api/file/image/upload', //仅为示例，非真实的接口地址
						filePath: files[index],
						name: 'file',
						success: (res) => {
							let result = JSON.parse(res.data)
							result.id = self.$u.guid();
							self.flowList.splice(0, 0, result)
							self.$refs.uTips.show({
								title: '上传成功',
								type: 'success',
								duration: '2300'
							})
							if (index < fileNum - 1) {
								uploadOne(index + 1)
							} else {
								self.imageUploadItem.progress = 0
							}
						},
						fail: (e) => {
							self.$refs.uTips.show({
								title: '上传失败',
								type: 'error',
								duration: '2300'
							})
							if (index < fileNum - 1) {
								uploadOne(index + 1)
							} else {
								self.imageUploadItem.progress = 0
							}
						}
					});
					uploadTask.onProgressUpdate((res) => {
						self.imageUploadItem.progress = res.progress
					});
				}
				uploadOne(0)
			},
			handletouchmove(event) {


			},
			handletouchstart(event) {
				this.lastX = event.changedTouches[0].pageX;
				this.lastY = event.changedTouches[0].pageY;
			},
			handletouchend(event) {
				if (this.flag !== 0) {
					return;
				}
				let currentX = event.changedTouches[0].pageX;
				let currentY = event.changedTouches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;
				this.mindex = -1;
				//左右方向滑动
				if (Math.abs(tx) < Math.abs(ty)) {
					if (ty < 0) {
						this.flag = 3;
						if (Math.abs(ty) > 100) {
							this.deleteSwiperItem(this.flowList[this.imageSwipeCurrent])
						}
					}
				}
				this.lastX = currentX;
				this.lastY = currentY;

				this.flag = 0;
			},

			deleteSwiperItem(item) {
				this.$u.delete('/api/file/image/delete/' + item.name).then(res => {
					const length = this.flowList.length
					for (let i = 0; i < length; i++) {
						const e = this.flowList[i]
						if (e.id == item.id) {
							this.flowList.splice(i, 1)
							break
						}
					}
					if (this.imageSwipeCurrent > this.flowList.length - 3) {
						this.addRandomData()
					}
					this.$refs.uWaterfall.remove(item.id)
					this.total--
				})
			}
		}
	};
</script>



<style lang="scss" scoped>
	.image-warter-left {
		border-radius: 8px;
		padding: 8rpx 8rpx 8rpx 16rpx;
		position: relative;
	}

	.slot-wrap-right {
		margin: 2rpx 20rpx;
	}

	.image-warter-right {
		border-radius: 8px;
		padding: 8rpx 16rpx 8rpx 8rpx;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.image-swiper {
		height: 100%;
	}

	.image-swiper-image {
		width: 100%;
		height: 100% !important;
	}

	.dark {
		.image-swiper-image {
			background-color: #111111 !important;
		}
	}

	.light {
		.image-swiper-image {
			background-color: #eeeeee !important;
		}
	}

	.image-image {
		width: 100%;
		border-radius: 4px;
	}

	.image-title {
		font-size: 15rpx;
		margin-top: 5px;
		color: $u-tips-color;
		word-break: break-all;
	}

	.image-shop {
		font-size: 8px;
		color: $u-main-color;
		margin-top: 5px;
	}

	.image-dialog {
		width: 100%;
		height: 100%;
	}

	.upload-btn {
		position: absolute;
		right: 0;
		bottom: 0;
	}
</style>
